<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .em{
            /*overflow: hidden;*/
            /**overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容
            （包括使用float的div盒子）
            ，从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。/
             离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
             */
            background-color: blueviolet;
        }
        .div1{
            float:left;
            width:150px;
            height:150px;
            background-color: deeppink;
        }
        .div2{
            float:left;
            width:150px;
            height:150px;
            background-color: gold;
        }
        .div3{
            width:150px;
            height:150px;
            background-color: pink;
        }
        /*.clear{*/
            /*clear:both;*/
        /*}*/
        .clearfix:before,.clearfix:after{
            display: table;
            content:'';
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom:1
        }
        .div3 div{
            height:50px;
            background-color: black;
            float: left;
        }
        /*浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素*/
    </style>
</head>
<body>
<div class="em clearfix">
    <div class="div1"></div>
    <div class="div2"></div>
    <!--但是会有好多空标签-->
    <!--<div class="clear"></div>-->
</div>
<div class="div3">
    <div></div>
</div>
</body>
</html>